<template>
  <div class="register-container">
    <div class="logo">
      <img src="../assets/elmlogo.jpg" alt="logo">
    </div>
    <div class="form-box">
      <el-input 
        v-model="registerForm.userId" 
        placeholder="请输入手机号"
        class="input-item"
      />
      <el-input 
        v-model="registerForm.password" 
        type="password"
        placeholder="请输入密码"
        class="input-item"
        show-password
      />
      <el-input 
        v-model="confirmPassword" 
        type="password"
        placeholder="请确认密码"
        class="input-item"
        show-password
      />
      <el-input 
        v-model="registerForm.userName" 
        placeholder="请输入昵称"
        class="input-item"
      />
      
      <div class="gender-select">
        <span class="label">性别：</span>
        <el-radio-group v-model="registerForm.userSex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </div>
      
      <el-button type="primary" @click="register" class="submit-btn">注册</el-button>
      
      <div class="login-link">
        <span>已有账号？</span>
        <el-link type="primary" @click="goToLogin">去登录</el-link>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import Footer from './Footer.vue'
import qs from 'qs'


const router = useRouter()
const confirmPassword = ref('')

const registerForm = ref({
  userId: '',
  password: '',
  userName: '',
  userSex: 1
})

// 注册
const register = async () => {
  try {
    // 表单验证
    if (!registerForm.value.userId) {
      ElMessage.warning('手机号不能为空')
      return
    }
    if (!registerForm.value.password) {
      ElMessage.warning('密码不能为空')
      return
    }
    if (!confirmPassword.value) {
      ElMessage.warning('确认密码不能为空')
      return
    }
    if (registerForm.value.password !== confirmPassword.value) {
      ElMessage.warning('两次输入的密码不一致')
      return
    }
    if (!registerForm.value.userName) {
      ElMessage.warning('昵称不能为空')
      return
    }

    // 发送注册请求
    const response = await request({
      url: '/UserController/register',
      method: 'post',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'  // Form Data 格式
      },
      data: {
        userId: registerForm.value.userId,
        password: registerForm.value.password,  // 直接发送原始密码
        userName: registerForm.value.userName,
        userSex: registerForm.value.userSex
      }
    })

    if (response.status === 200) {
      ElMessage.success('注册成功')
      router.push('/login')
    } else {
      ElMessage.error(response.data || '注册失败')
    }
  } catch (error) {
    console.error('注册错误:', error)
    if (error.response?.data) {
      ElMessage.error(error.response.data)
    } else if (error.response?.status === 403) {
      ElMessage.error('该手机号已被注册')
    } else {
      ElMessage.error('注册失败，请稍后重试')
    }
  }
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background: #fff;
  padding: 20px;
}

.logo {
  text-align: center;
  margin: 80px 0;
}

.logo img {
  width: 200px;
}

.form-box {
  padding: 0 20px;
}

.input-item {
  margin-bottom: 20px;
}

.input-item :deep(.el-input__inner) {
  height: 45px;
  border-radius: 25px;
  border: 1px solid #eee;
}

.gender-select {
  margin-bottom: 30px;
  padding: 0 15px;
}

.gender-select .label {
  color: #606266;
  margin-right: 15px;
}

.gender-select :deep(.el-radio__label) {
  color: #606266;
}

.submit-btn {
  width: 100%;
  height: 45px;
  border-radius: 25px;
  background: #00a7ff;
  font-size: 16px;
  margin-bottom: 15px;
}

.login-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #999;
}

.login-link :deep(.el-link--primary) {
  font-size: 14px;
  color: #00a7ff;
}
</style>